<template>
  <div class="login-container">
    <vue-particles
      color="#555"
      :particleOpacity="0.7"
      :particleNumber="150"
      shapeType="circle"
      :partcleSize="4"
      linesColor="#555"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="false"
      clickMode="push"
      class="lizi"
    />
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix title">
        <span>智慧养殖-黑山羊管理平台</span>
      </div>
      <el-form :model="formData" label-width="100px">
        <el-form-item label="用户账号" class="wi-1">
          <el-input
            v-model="formData.account"
            prefix-icon="el-icon-user"
            clearable 
          ></el-input>
        </el-form-item>
        <el-form-item class="martop-1">
          <el-radio v-model="formData.role" label="1">养殖企业</el-radio>
          <el-radio v-model="formData.role" label="2" style="margin-left: 30px"
            >平台运营人员</el-radio
          >
        </el-form-item>
        <el-form-item class="martop-1">
          <el-button
            type="primary"
            @click="registerBtn"
            class="wi-3"
            @keyup.enter="registerBtn"
            >注册</el-button
          >
          <el-button
            type="primary"
            @click="backLogin"
            class="wi-3"
            style="margin-left: 50px"
            >返回登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import "@/assets/PublicLess.less"
export default {
  data () {
    return {
      formData: {
        account: '',
        role: "1"
      },
    }
  },
  methods: {
    keyDown (e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.registerBtn() // 定义的登录方法
      }
    },
    registerBtn () {
      const data = {
        account: this.formData.account,
        role: parseInt(this.formData.role)
      }
      if (data.account === '') {
        this.$message.error("账号不能为空!")
      } else {
        this.$axios.post('/api/users/add', data).then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.$router.push('/login')
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    backLogin () {
      this.$router.push('/login')
    }
  },
  mounted () {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown)
  },
  destroyed () {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false)
  },
}
</script>

<style lang="less" scoped>
body {
  width: 100%;
  background-color: rgb(239, 239, 239);
  margin: 0;
  padding: 0;
}

.box-card {
  border-radius: 15px;
}

.lizi {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.el-form-item {
  margin-top: 25px;
  margin-bottom: 25px;
}

.login-container {
  // position: absolute;
  // right: 38%;
  // bottom: 38%;
  // width: 400px;
  // height: 290px;
  display: flex; /* 设置为 flex 容器 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 100vh; /* 或者设置一个固定高度，如 100% */
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #9fc5fe;
  position: relative;
  left: 20%;
}
</style>